Implemented Dashboard Data Fetching Using Context (Stats + Categories)

Description
Implement the data layer for the Dashboard by consuming backend endpoints and exposing the data via a context or feature-based abstraction.

❗ Pages and UI components must not directly call APIs.

API Endpoints
GET /dashboard/stats
GET /categories
Scope of Work
Create Dashboard Context (or Feature Hook)
Create something like:

DashboardProvider
or useDashboard()
or dashboard.feature.ts

This layer should:

Fetch dashboard stats
Fetch categories
Handle loading and error states
Expose normalized data to the UI
Example shape:

{
stats: {
streak: number;
points: number;
dailyQuestProgress: {
completed: number;
total: number;
};
};
categories: Category[];
isLoading: boolean;
error: string | null;
Data Fetching Responsibilities
Fetch user streak & points from /dashboard/stats
Fetch available categories and user levels from /categories

Handle:

Loading states
Error states
No duplicated API calls across components
Integrate With Dashboard Page
Wrap the dashboard page with the provider
UI components should:
Consume data via context
Never import or call fetch / axios directly
Requirements
Use Context API or a feature-based hook
No API calls inside UI components
Clean separation of concerns
Types defined for API responses
Loading state exposed for UI consumption
Acceptance Criteria

Dashboard loads data from backend successfully

Loading state is available to UI

No page or component directly calls endpoints

Data logic is centralized and reusable

Easy to extend for future dashboard featuresImplement Dashboard Data Fetching Using Context (Stats + Categories) #156
Open
Feature
@phertyameen
Description
phertyameen
opened on Jan 18
Member
Description
Implement the data layer for the Dashboard by consuming backend endpoints and exposing the data via a context or feature-based abstraction.

❗ Pages and UI components must not directly call APIs.

API Endpoints
GET /dashboard/stats
GET /categories
Scope of Work
Create Dashboard Context (or Feature Hook)
Create something like:

DashboardProvider
or useDashboard()
or dashboard.feature.ts

This layer should:

Fetch dashboard stats
Fetch categories
Handle loading and error states
Expose normalized data to the UI
Example shape:

{
stats: {
streak: number;
points: number;
dailyQuestProgress: {
completed: number;
total: number;
};
};
categories: Category[];
isLoading: boolean;
error: string | null;
Data Fetching Responsibilities
Fetch user streak & points from /dashboard/stats
Fetch available categories and user levels from /categories

Handle:

Loading states
Error states
No duplicated API calls across components
Integrate With Dashboard Page
Wrap the dashboard page with the provider
UI components should:
Consume data via context
Never import or call fetch / axios directly
Requirements
Use Context API or a feature-based hook
No API calls inside UI components
Clean separation of concerns
Types defined for API responses
Loading state exposed for UI consumption
Acceptance Criteria

Dashboard loads data from backend successfully

Loading state is available to UI

No page or component directly calls endpoints

Data logic is centralized and reusable

Easy to extend for future dashboard features

closes #156